<template>
  <div>
    <div class="box"></div>
    <div class="loginBox">
      <p class="login_title">绝顶购物</p>
      <el-form :model="user" status-icon :rules="rules" ref="user" label-width="50px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input size="mini" type="text" v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="密码" prop="password">
          <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="fot">
         <p>还没有账号?<button @click="toAdd">立即注册</button></p>
         <p>忘记密码?<button @click="toPas">立即找回</button></p>
      </div>
      <el-button class="btn" @click="goTo">登录</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    // var validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'))
    //   } else {
    //     const reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,15}$/
    //     if (reg.test(value)) {
    //       callback(new Error('密码包含 数字,英文,字符中的两种以上，长度6-15'))
    //     }
    //   }
    // }
    return {
      addUser: 'adduser',
      Pas: 'reset',
      user: {
        username: '万勇2',
        password: '123456789'
      },
      rules: {
        username: [
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          // { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toAdd () {
      this.$bus.$emit('title', this.addUser)
    },
    toPas () {
      this.$bus.$emit('title', this.Pas)
    },
    goTo () {
      this.$axios.post('/login', this.user).then((res) => {
        console.log(res)
        sessionStorage.setItem('token', res.headers.authorization)
        if (sessionStorage.getItem('token')) {
          this.$router.replace('/shop')
        }
      }).catch(err => {
        console.error(err)
      })
      // getUser(this.user).then((request) => {
      //   console.log(request)
      // }).catch(err => {
      //   console.error(err)
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.box{
  width: 300px;
  height: 400px;
  background-image: url('https://img0.baidu.com/it/u=2042637590,3523032130&fm=253&fmt=auto?w=1200&h=800');
  background-size: 240%;
  background-position: -200px;
  background-repeat: no-repeat;
  display: inline-block;
}
.loginBox{
  width: 260px;
  height: 400px;
  overflow: hidden;
  padding: 20px;
  display:inline-block;
  background-color: rgb(242, 242, 243);
    p{
      font-size: 10px;
    }
    .login_title{
      padding: 20px;
      padding-left: 40px;
      font-size: 39px;
      // margin-left: 70px;
      // margin-top: 10px;
    }
    .demo-ruleForm{
      margin-top: 30px;
    }
    .btn{
      margin-top: 30px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .fot{
      margin-top: 10px;
    }
  }
button{
  border: 0px;
}
</style>
